<template>
  <Layout style="height: 100%" class="main">
    <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
      <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <div style="width:44px;height:44px;">
            <img style="width:100%;border-radius:5px;" :src="school ? school.logo : ''" />
          </div>
          <div v-show="!collapsed" style="display:flex;flex:1;">
            <div style="flex:4;">
              <p class="school-name" v-text="school ? school.name : ''"></p>
            </div>
            <div style="flex:1;">
              <Dropdown trigger="click" @on-click="clickSchool" :transfer="true" placement="bottom-end">
                <Icon color="#3E4658" size="24" type="ios-arrow-down"></Icon>
                <DropdownMenu slot="list">
                  <DropdownItem :class="school._id === item._id ? 'custom-dropdown-item dropdown-item-active' : 'custom-dropdown-item'" :name="i + ''" v-for="(item,i) in schools" v-bind:key="i">{{item.name}}</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </div>
          </div>
        </div>
      </side-menu>
      <div style="position: absolute;bottom: 15px;width: 100%;text-align: center;">
        <Poptip placement="top" transfer>
          <p style="padding-bottom: 0px;margin-bottom: 10px;">
            <img :src="sLogo" style="width:40px;"/>
          </p>
          <p style="text-align:center;cursor: pointer;font-size:14px;"><Icon v-if="!collapsed" type="md-chatbubbles" /> 联系我们</p>
          <div slot="content">
            <p style="font-size: 14px;border-bottom: 1px solid #b4b4b4;padding: 15px 0px;margin-bottom: 15px;"><Icon type="md-call" /> 17608161524</p>
            <p><img style="width:175px;height:175px;" src="https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=829888290,2650878176&fm=74&app=80&f=JPG&size=f121,121?sec=1880279984&t=274501980523d63a7d93c94f85aabbab"/></p>
            <p><small>扫码添加管理员咨询</small></p>
          </div>
        </Poptip>
      </div>
    </Sider>
    <Layout>
      <Header class="header-con">
        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
          <user :user-name="userName"/>
          <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
          <span :class=" is_test ? 'test-text' : 'pro-text'" v-text="is_test ? '测试环境' : '正式环境'"></span>
          <span style="margin-right:15px;" v-text="show_header_text"></span>
        </header-bar>
      </Header>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <div class="tag-nav-wrapper">
            <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag"/>
          </div>
          <Content class="content-wrapper">
            <keep-alive :include="cacheList">
              <router-view/>
            </keep-alive>
            <ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<style scoped>
.test-text{
  color: green;
  margin-right: 10px;
}
.pro-text{
  color: red;
  margin-right: 10px;
}
</style>
<script>
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import ABackTop from './components/a-back-top'
import Fullscreen from './components/fullscreen'
import Language from './components/language'
import ErrorStore from './components/error-store'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import { getNewTagList, routeEqual } from '@/libs/util'
import routers from '@/router/routers'
import minLogo from '@/assets/images/logo-min.png'
import maxLogo from '@/assets/images/logo.png'
import sLogo from '@/assets/images/logo-s.png'
import { fetchSchools } from '@/graphql/query/school/index'
import './main.less'
export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    Language,
    TagsNav,
    Fullscreen,
    ErrorStore,
    User,
    ABackTop
  },
  data () {
    return {
      collapsed: false,
      minLogo,
      maxLogo,
      sLogo,
      isFullscreen: false
    }
  },
  computed: {
    is_test () {
      return /^test.*/.test(document.location.host)
    },
    show_header_text () {
      dayjs.locale('zh-cn')
      const format = '欢迎登陆 今天是YYYY年MMMD日 星期dd'
      return dayjs().format(format)
    },
    ...mapGetters([
      'errorCount',
      'schools',
      'school'
    ]),
    tagNavList () {
      return this.$store.state.app.tagNavList
    },
    tagRouter () {
      return this.$store.state.app.tagRouter
    },
    userName () {
      return this.$store.state.user.userName
    },
    cacheList () {
      const list = ['ParentView', ...this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]
      return list
    },
    menuList () {
      return this.$store.getters.menuList
    },
    local () {
      return this.$store.state.app.local
    },
    hasReadErrorPage () {
      return this.$store.state.app.hasReadErrorPage
    }
  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      'setTagNavList',
      'addTag',
      'setLocal',
      'setHomeRoute',
      'closeTag',
      'setSchools',
      'setSchool'
    ]),
    ...mapActions([
      'handleLogin',
      'setMenuCollapsed'
    ]),
    clickSchool (index) {
      index = parseInt(index)
      this.setSchool(this.schools[index])
    },
    turnToPage (route) {
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query
      })
    },
    handleCollapsedChange (state) {
      this.collapsed = state
    },
    handleCloseTag (res, type, route) {
      if (type !== 'others') {
        if (type === 'all') {
          this.turnToPage(this.$config.homeName)
        } else {
          if (routeEqual(this.$route, route)) {
            this.closeTag(route)
          }
        }
      }
      this.setTagNavList(res)
    },
    handleClick (item) {
      this.turnToPage(item)
    }
  },
  watch: {
    '$route' (newRoute) {
      const { name, query, params, meta } = newRoute
      this.addTag({
        route: { name, query, params, meta },
        type: 'push'
      })
      this.setBreadCrumb(newRoute)
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
      this.$refs.sideMenu.updateOpenName(newRoute.name)
    }
  },
  mounted () {
    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    this.setTagNavList()
    this.setHomeRoute(routers)
    const { name, params, query, meta } = this.$route
    this.addTag({
      route: { name, params, query, meta }
    })
    this.setBreadCrumb(this.$route)
    // 设置初始语言
    this.setLocal(this.$i18n.locale)
    // 如果当前打开页面不在标签栏中，跳到homeName页
    if (!this.tagNavList.find(item => item.name === this.$route.name)) {
      this.$router.push({
        name: this.$config.homeName
      })
    }
    fetchSchools().then(data => {
      this.setSchools(data.data.my_schools)
    })
  }
}
</script>
